﻿@model RightControl.Model.ProductDetail
@using System.Collections.Generic;
@using RightControl.Model;
@{

    ViewBag.Title = "子商品详情";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutSinglePage.cshtml";
    var isEng = ViewData["IsEng"].ToString();
 }

<style type="text/css">
    .ul_incr li{
        width: 40px;
        font-size:16px;
        line-height:28px;
        cursor:pointer;
        text-align:center;
        flex:auto;
        /*white-space:nowrap;*/
    }

      .ul_incr {
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
        }

       .layui-tab-title{
          border-bottom-width: 0px
      }

       .layui-tab-card>.layui-tab-title{
          background-color: #ffffff;
          display: flex;
          flex-direction: column;
      }

       .layui-tab-card{
          display: flex;
      }

       .boderRed{
           border: 1px solid red;
       }

       .layui-tab-card > .layui-tab-title li{
               border-right: 3px solid #c5cbcb;
               font-weight: bold;
               font-size: 16px;
       }

      .layui-layer-page .layui-layer-content{
           text-align: center;
       }


       .layui-tab-card>.layui-tab-title .layui-this{
          background-color: #009f95
      }

     .colorList>span{
            width: 100px;
            display: inline-block;
            text-align: center;
            font-size: 16px;
            padding: 8px;
            cursor:pointer;
       }
    .colorList>span:hover{
            background: #dddddd;
    }
    .attention {
         font-size: 18px;
         color:red;
    }

     #pic{position: absolute; display: none;z-index:9999; background-color:white;color:blue; }
     #pic1{ width: 400px; height: 400px; border-radius: 5px; -webkit-box-shadow: 5px 5px 5px 5px hsla(0,0%,5%,1.00); box-shadow: 5px 5px 5px 0px hsla(0,0%,5%,0.3); } 
</style>
@*<blockquote class="layui-elem-quote p10"></blockquote>*@
<div class="layui-form-item">
  
    <div id="divIncrSize" style="display:none;">         
        <ul class="ul_incr">
            <li><a>0</a></li>
            <li><a>0.5</a></li>
            <li><a>1.0</a></li>
            <li><a>1.5</a></li>
            <li><a>2.0</a></li>
            <li><a>2.5</a></li>
            <li><a>3.0</a></li>
            <li><a>3.5</a></li>
            <li><a>4.0</a></li>
            <li><a>4.5</a></li>
            <li><a>5.0</a></li>
            <li><a>5.5</a></li>
            <li><a>6.0</a></li>
            <li><a>6.5</a></li>
            <li><a>7.0</a></li>
            <li><a>7.5</a></li>
            <li><a>8.0</a></li>
            <li><a>清空</a></li>
        </ul>
    </div>

    <div id="divIncrWegith" style="display:none;">
        <ul class="ul_incr">
            <li><a>0</a></li>
            <li><a>0.01</a></li>
            <li><a>0.02</a></li>
            <li><a>0.03</a></li>
            <li><a>0.04</a></li>
            <li><a>0.05</a></li>
            <li><a>0.06</a></li>
            <li><a>0.07</a></li>
            <li><a>清空</a></li>
        </ul>   
    </div>

    <div class="attention">【友情提示:】为了顺利完成商品上传，请将下面产品图库中相同的图片删除!</div>
    <table border="1">
        <tbody>
            <tr>
                <td rowspan="2" width="30px" style="padding:10px;font-size:28px">产品图库</td>
                <td width="25px" style="padding:5px;background-color:goldenrod;font-size:22px">主图</td>
                <td>
                    <div class="layui-input-block imgcontainer">
                        <ul class="ulImages" id="imgStore" imgType="1">
                            @{
                                List<ProductImage> images = ViewData["productImgs"] as List<ProductImage>;
                                if (images != null) {
                                    for (int i = 0; i < images.Count; i++) {
                                        if (images[i].ImgType == 1) {
                                            <li id="@images[i].Id" imagetype="1">
                                                <div style="position: absolute;width:140px;height:140px ">
                                                    <span class="rmPicture close" title="删除此图">×</span>
                                                    <a><img src="@images[i].ImgUrl"/></a>
                                                </div>

                                                @*<div style="bottom:5px" ><span>尺寸300*400</span></div>*@
                                            </li>
                                        }
                                    }
                                }
                            }
                        </ul>
                        <div class="layui-upload-drag" style="width:85px;height:75px;margin:5px" id="uploadMainImg">
                            <i class="layui-icon"></i>
                            <p>点击上传或将文件拖到此处</p>                            
                        </div>
                    </div>
                </td>
            </tr>
            <tr>             
                <td style="padding:5px;background-color:yellowgreen;font-size:22px">详情图</td>
                <td>
                    <div class="layui-input-block imgcontainer">
                        <ul class="ulImages" id="imgDStore" imgtype="2">
                            @{
                                if (images != null) {
                                    for (int i = 0; i < images.Count; i++) {
                                        if (images[i].ImgType == 2) {
                                            <li id="@images[i].Id" imagetype="2">
                                                <div style="position: absolute;width:140px;height:140px ">
                                                    <span class="rmPicture close" title="删除此图">×</span>
                                                    <a><img src="@images[i].ImgUrl" /></a>
                                                </div>

                                                @*<div style="bottom:5px" ><span>尺寸300*400</span></div>*@
                                            </li>
                                        }
                                    }
                                }
                            }
                        </ul>
                        <div class="layui-upload-drag" style="width:85px;height:75px;margin:5px" id="uploadDImg">
                            <i class="layui-icon"></i>
                            <p>点击上传或将文件拖到此处</p>
                        </div>
                    </div>
                </td>
            </tr>

        </tbody>
    </table>
    <img alt="" style="display:none" id="displayimg" src="" />
</div>

@*<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>变体信息</legend>
</fieldset>*@

    <div class="layui-card-header">变体信息</div>

    <div class="layui-fluid">
        <div class="layui-field-box" style="padding:0;" id="subProdColorTable">
            <table id="subProductColorTb" lay-filter="defaultruv"></table>          
            <script type="text/html" id="bar">
                @Html.ToolBarHtml(ViewData["ActionList"])
            </script>
        </div>
    </div>

    @*<blockquote class="layui-elem-quote p10"></blockquote>

        <blockquote class="layui-elem-quote p10"></blockquote>*@
    <div class="layui-fluid" id="variationTable">
        <div class="layui-field-box" style="padding:0;" id="subProdSizeTable">
            <table id="subProductTb" lay-filter="subProductSize"></table>
            <a id="addSize">+增加尺码</a>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <a class="layui-btn" lay-submit="Product/updateProduct" lay-filter="submitForm" id="submitForm">一键保存</a>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>


    <div class="layui-fluid" style="min-height: 140px; height: auto;display:none" id="selImgDiv">
        <div class="layui-form-item">
            <ul class="ulImages" id="imgSelect"></ul>
        </div>
    </div>

    <div class="layui-fluid" style="min-height: 140px; height: 430px;display:none" id="standardColor">
        <div class="layui-tab layui-tab-card" style="height: 96%;">
            <ul class="layui-tab-title">
                <li  class="layui-this">红色系</li>
                <li>黄色系</li>
                <li>绿色系</li>
                <li>蓝色系</li>
                <li>紫色系</li>
                <li>灰色系</li>
                <li>白色系</li>
                <li>黑色系</li>
                <li>杂色系</li>
            </ul>
            <div class="layui-tab-content" style="height: 100%;">
                <div class="layui-tab-item layui-show colorList">
                    <span>红色</span>
                    <span>藕色</span>
                    <span>粉色</span>
                    <span>梅红色</span>
                    <span>桃红色</span>
                    <span>金红色</span>
                    <span>铁红色</span>
                    <span>砖红色</span>
                    <span>土红色</span>
                    <span>酒红色</span>

                    <span>棕红色</span>
                    <span>鲜红色</span>
                    <span>深红色</span>
                    <span>淡红色</span>
                    <span>赤红色</span>
                    <span>银红色</span>
                    <span>殷红色</span>
                    <span>火红色</span>
                    <span>品红色</span>
                    <span>艳红色</span>

                    <span>亮红色</span>
                    <span>粉红色</span>
                    <span>浅红色</span>
                    <span>血红色</span>
                    <span>暗红色</span>
                    <span>桔红色</span>
                    <span>莲红色</span>
                    <span>枣红色</span>
                    <span>玫红色</span>
                    <span>红糖色</span>

                    <span>铁锈红</span>
                    <span>深紫红</span>
                    <span>辣椒红</span>
                    <span>高梁红</span>
                    <span>芙蓉红</span>
                    <span>胭脂红</span>
                    <span>玳瑁红</span>
                    <span>宝石红</span>
                    <span>玛瑙红</span>
                    <span>珊瑚红</span>

                    <span>樱桃红</span>
                    <span>石榴红</span>
                    <span>浅莲红</span>
                    <span>玫瑰红</span>
                </div>
                <div class="layui-tab-item colorList">
                    <span>黄色</span>
                    <span>橙色</span>
                    <span>桔色</span>
                    <span>杏色</span>
                    <span>蛋黄色</span>
                    <span>藤黄色</span>
                    <span>砂黄色</span>
                    <span>深黄色</span>
                    <span>棕黄色</span>
                    <span>青黄色</span>
                    <span>灰黄色</span>

                    <span>鲜黄色</span>
                    <span>鹅黄色</span>
                    <span>中黄色</span>
                    <span>浅黄色</span>
                    <span>杏黄色</span>
                    <span>土黄色</span>
                    <span>梨黄色</span>
                    <span>橘黄色</span>
                    <span>橙黄色</span>
                    <span>金黄色</span>

                    <span>米黄色</span>
                    <span>嫩黄色</span>
                    <span>淡黄色</span>
                    <span>湖绿色</span>
                    <span>深橙色</span>
                    <span>橘红色</span>
                    <span>深桔黄</span>
                    <span>浅桔黄</span>
                    <span>柠檬黄</span>
                    <span>玉米黄</span>

                    <span>橄榄黄</span>
                    <span>稻草黄</span>
                    <span>芥末黄</span>
                    <span>象牙黄</span>
                    <span>日光黄</span>
                    <span>柠檬黄色</span>
                </div>
                <div class="layui-tab-item colorList">
                    <span>绿色</span>
                    <span>豆绿色</span>
                    <span>茶绿色</span>
                    <span>湖绿色</span>
                    <span>葱绿色</span>
                    <span>玉绿色</span>
                    <span>石绿色</span>
                    <span>墨绿色</span>
                    <span>深绿色</span>
                    <span>暗绿色</span>
                    
                    <span>青绿色</span>
                    <span>碧绿色</span>
                    <span>蓝绿色</span>
                    <span>黄绿色</span>
                    <span>灰绿色</span>
                    <span>褐绿色</span>
                    <span>中绿色</span>
                    <span>浅绿色</span>
                    <span>淡绿色</span>
                    <span>翠绿色</span>
                    
                    <span>新绿色</span>
                    <span>嫩绿色</span>
                    <span>明绿色</span>
                    <span>亮绿色</span>
                    <span>鲜绿色</span>
                    <span>草绿色</span>
                    <span>水绿色</span>
                    <span>油绿色</span>
                    <span>军绿色</span>
                    <span>苹果绿</span>
                    
                    <span>森林绿</span>
                    <span>苔藓绿</span>
                    <span>草地绿</span>
                    <span>灰湖绿</span>
                    <span>水晶绿</span>
                    <span>浅豆绿</span>
                    <span>橄榄绿</span>
                    <span>松石绿</span>
                    <span>孔雀绿</span>
                    <span>墨玉绿</span>
                    
                    <span>绿松石色</span>
                    <span>宝石绿色</span>
                    
                </div>
                <div class="layui-tab-item colorList">
                    <span>靛青</span>
                    <span>蓝色</span>
                    <span>天蓝色</span>
                    <span>蔚蓝色</span>
                    <span>海蓝色</span>
                    <span>湖蓝色</span>
                    <span>藏蓝色</span>
                    <span>宝蓝色</span>
                    <span>墨蓝色</span>
                    <span>紫蓝色</span>
                    
                    <span>青蓝色</span>
                    <span>深蓝色</span>
                    <span>鲜蓝色</span>
                    <span>中蓝色</span>
                    <span>浅蓝色</span>
                    <span>淡蓝色</span>
                    <span>亮蓝色</span>
                    <span>湛蓝色</span>
                    <span>暗蓝色</span>
                    <span>金蓝色</span>
                    
                    <span>藏青色</span>
                    <span>海军蓝</span>
                    <span>月光蓝</span>
                    <span>海洋蓝</span>
                    <span>深湖蓝</span>
                    <span>中湖蓝</span>
                    <span>冰雪蓝</span>
                    <span>孔雀蓝</span>
                    <span>宝石蓝</span>
                    <span>粉末蓝</span>
                    
                    <span>浅紫蓝</span>
                    <span>深灰蓝</span>
                </div>
                <div class="layui-tab-item colorList">
                    <span>紫色</span>
                    <span>紫红色</span>
                    <span>墨紫色</span>
                    <span>暗紫色</span>
                    <span>乌紫色</span>
                    <span>蓝紫色</span>
                    <span>鲜紫色</span>
                    <span>深紫色</span>
                    <span>浅紫色</span>
                    <span>淡紫色</span>
                    
                    <span>葡萄紫</span>
                    <span>茄皮紫</span>
                    <span>玫瑰紫</span>
                    <span>丁香紫</span>
                    <span>淡白紫</span>
                    <span>紫水晶色</span>
                    <span>紫罗兰色</span>
                </div>
                <div class="layui-tab-item colorList">
                    <span>灰色</span>
                    <span>烟灰色</span>
                    <span>雾灰色</span>
                    <span>黑灰色</span>
                    <span>银灰色</span>
                    <span>炭灰色</span>
                    <span>深灰色</span>
                    <span>浅灰色</span>
                </div>
                <div class="layui-tab-item colorList">
                    <span>白色</span>
                    <span>乳白色</span>
                    <span>米白色</span>
                    <span>雪白色</span>
                    <span>灰白色</span>
                    <span>纯白色</span>
                    <span>本白色</span>
                    <span>银白色</span>
                    <span>粉红白</span>
                    <span>浅紫白</span>

                    <span>象牙白</span>
                    <span>牡蛎白</span>
                    <span>珍珠白</span>
                    <span>玉石白</span>
                    <span>羊毛白</span>
                </div>
                <div class="layui-tab-item colorList">
                    <span>黑色</span>
                    <span>炭黑色</span>
                    <span>暗黑色</span>
                    <span>漆黑色</span>
                    <span>墨黑色</span>
                    <span>油黑色</span>
                    <span>黑金色</span>
                    <span>黑蓝色</span>
                    <span>黑紫色</span>
                    <span>黑棕色</span>
                    
                    <span>纯黑色</span>
                </div> 
                <div class="layui-tab-item colorList">
                    <span>金色</span>
                    <span>银色</span>
                    <span>驼色</span>
                    <span>米色</span>
                    <span>棕色</span>
                    <span>枪色</span>
                    <span>茄色</span>
                    <span>拼色</span>
                    <span>烤色</span>
                    <span>栗色</span>
                    <span>豹纹</span>
                    <span>亮色</span>
                    <span>裸色</span>
                    <span>褐色</span>
                    <span>混色</span>
                    <span>单色</span>
                    <span>多色</span>
                    <span>钛色</span>
                    <span>透明</span>
                    <span>浅咖色</span>
                    <span>浅棕色</span>
                    
                    <span>茶褐色</span>
                    <span>淡褐色</span>
                    <span>咖啡色</span>
                    <span>琥珀色</span>
                    <span>卡其色</span>
                    <span>奶油色</span>
                    <span>豆沙色</span>
                    <span>水晶色</span>
                    <span>荧光色</span>
                    <span>彩虹色</span>
                    
                    <span>薄荷色</span>
                    <span>深棕色</span>
                    <span>石头色</span>
                    <span>糖果色</span>
                    <span>条纹色</span>
                    <span>图片色</span>
                    <span>香槟色</span>
                    <span>亚麻色</span>
                    <span>主图色</span>
                    <span>浅金色</span>
                    
                    <span>冬白色</span>
                    <span>渐变色</span>
                    <span>金属色</span>
                    <span>巧克力色</span>
                    <span>马卡龙色</span>
                    <span>冰激淋色</span>
                    <span>青古铜色</span>
                    <span>玫瑰金色</span>
                    <span>钢铁侠红色</span>
                    <span>深卡其布色</span>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-fluid" style="min-height: 140px; display:none" id="standardSize">
        <div class="layui-tab-content" style="height: 100%;">
            <div class="layui-tab-item layui-show colorList" id="sizeList">
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="~/Areas/Admin/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Areas/Admin/Scripts/jquery-migrate-1.1.1.js"></script>
    <script type="text/javascript" src="~/Areas/Admin/Scripts/jquery.dragsort-0.5.1.min.js"></script>
    <script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
    <script type="text/javascript">
        //xiuxiu.embedSWF("altContent", 3, 800, "100%","lite");
        //xiuxiu.loadPhoto("http://open.web.meitu.com/sources/images/1.jpg");
        //xiuxiu.onInit = function(id) {
        
        //}

    layui.use(['table','common','upload','form','element'], function () {
        var form = layui.form,
            common = layui.common,
            upload = layui.upload //上传
        element = layui.element;
        var isEng =@isEng =="1";
        var $ = layui.$, active = {
            reload: function () {
                $('#ajax-loader').fadeOut(); //todo：加载滚动条
                //执行重载
                table.reload('subProdColorReload', {});

                table.reload('subProductSizeReload', {});
            }
        };

        var colorAllList=["红色","藕色","粉色","梅红色","桃红色","金红色","铁红色","砖红色","土红色","酒红色","棕红色","鲜红色","深红色","淡红色","赤红色","银红色","殷红色","火红色","品红色","艳红色","亮红色","粉红色","浅红色","血红色","暗红色","桔红色","莲红色","枣红色","玫红色","红糖色","铁锈红","深紫红","辣椒红","高梁红","芙蓉红","胭脂红","玳瑁红","宝石红","玛瑙红","珊瑚红","樱桃红","石榴红","浅莲红","玫瑰红","黄色","橙色","桔色","杏色","蛋黄色","藤黄色","砂黄色","深黄色","棕黄色","青黄色","灰黄色","鲜黄色","鹅黄色","中黄色","浅黄色","杏黄色","土黄色","梨黄色","橘黄色","橙黄色","金黄色","米黄色","嫩黄色","淡黄色","湖绿色","深橙色","橘红色","深桔黄","浅桔黄","柠檬黄","玉米黄","橄榄黄","稻草黄","芥末黄","象牙黄","日光黄","柠檬黄色","绿色","豆绿色","茶绿色","葱绿色","玉绿色","石绿色","墨绿色","深绿色","暗绿色","青绿色","碧绿色","蓝绿色","黄绿色","灰绿色","褐绿色","中绿色","浅绿色","淡绿色","翠绿色","新绿色","嫩绿色","明绿色","亮绿色","鲜绿色","草绿色","水绿色","油绿色","军绿色","苹果绿","森林绿","苔藓绿","草地绿","灰湖绿","水晶绿","浅豆绿","橄榄绿","松石绿","孔雀绿","墨玉绿","绿松石色","宝石绿色","靛青","蓝色","天蓝色","蔚蓝色","海蓝色","湖蓝色","藏蓝色","宝蓝色","墨蓝色","紫蓝色","青蓝色","深蓝色","鲜蓝色","中蓝色","浅蓝色","淡蓝色","亮蓝色","湛蓝色","暗蓝色","金蓝色","藏青色","海军蓝","月光蓝","海洋蓝","深湖蓝","中湖蓝","冰雪蓝","孔雀蓝","宝石蓝","粉末蓝","浅紫蓝","深灰蓝","紫色","紫红色","墨紫色","暗紫色","乌紫色","蓝紫色","鲜紫色","深紫色","浅紫色","淡紫色","葡萄紫","茄皮紫","玫瑰紫","丁香紫","淡白紫","紫水晶色","紫罗兰色","灰色","烟灰色","雾灰色","黑灰色","银灰色","炭灰色","深灰色","浅灰色","白色","乳白色","米白色","雪白色","灰白色","纯白色","本白色","银白色","粉红白","浅紫白","象牙白","牡蛎白","珍珠白","玉石白","羊毛白","黑色","炭黑色","暗黑色","漆黑色","墨黑色","油黑色","黑金色","黑蓝色","黑紫色","黑棕色","纯黑色","金色","银色","驼色","米色","棕色","枪色","茄色","拼色","烤色","栗色","亮色","裸色","褐色","混色","彩色","单色","多色","钛色","透明","浅咖色","浅棕色","茶褐色","淡褐色","咖啡色","琥珀色","卡其色","奶油色","豆沙色","水晶色","荧光色","彩虹色","薄荷色","深棕色","石头色","糖果色","条纹色","图片色","香槟色","亚麻色","主图色","浅金色","冬白色","渐变色","金属色","巧克力色","马卡龙色","冰激淋色","青古铜色","玫瑰金色","钢铁侠红色","深卡其布色","豹纹"]
        var allSizeList='@Model.CategoryCode'=='CSH'?["34","35","36","37","38","39","40","41","42","43","44","45","46","47","48"]:
            ["3XS","2XS","XS","S","M","L","XL","2XL","3XL","4XL","5XL","6XL","7XL","8XL","9XL","10XL","Plus Size","Free Size"];
        for (var i = allSizeList.length-1; i >=0 ; i--) {
            $("#sizeList").prepend("<span>"+allSizeList[i]+"</span>");
        }

        $("#sltIcon").on("click", function () {
            openSetIcon();
        });

        //form.render('select');
        try{
            $(".ulImages").dragsort({
                dragSelector: "img",
                dragBetween: true ,
                dragEnd:function(){
                    //更新图片类型
                    var liObj = $(this);
                    var parentImgType = liObj.parent().attr("imgtype");
                    if (parentImgType == liObj.attr("imagetype")) return;
                    $.ajax({
                        url: "/Datasrv/SubProduct/UpdateImgType",
                        type: "POST",
                        data: { Id:liObj.attr("id"), ImgType:parentImgType},
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "success") {
                                liObj.attr("imagetype",parentImgType);
                                console.log("图片更新成功")
                            } else {
                                console.log("图片更新失败")
                            }
                        }
                    });
                }
            });

            $(".ulImages").on("click",".close",function(){
                $(this).parent().parent().remove();
                var id=$(this).parent().parent().attr("id");
                $.ajax({
                    url: "/Datasrv/SubProduct/DelProductImages",
                    type: "POST",
                    data: {Id:id},
                    dataType: "json",
                    success: function (data) {
                        if (data.state == "success") {
                            //table.reload('subProdColorReload', {});

                            console.log("图片删除成功")
                        } else {
                            console.log("图片删除失败")
                        }
                    }
                });
            });
        }catch(e){
            console.log(e);
        }

        try{
            //$("#imgSelect").dragsort({
            //    dragSelector: "img",
            //    dragBetween: true ,
            //    dragEnd:function(){
            //        var imgType = $(this).parent().attr("imgtype");
            //        if (imgType=="1") return;
            //        $.ajax({
            //            url: "/Datasrv/SubProduct/UpdateImgType",
            //            type: "POST",
            //            data: {Id:$(this).attr("id"),ImgType:imgType},
            //            dataType: "json",
            //            success: function (data) {
            //                if (data.state == "success") {
            //                    console.log("图片更新成功")
            //                } else {
            //                    console.log("图片更新失败")
            //                }
            //            }
            //        });
            //    }
            //});

        }catch(e){
            console.log(e);
        }

        var updateImages = function(seqId){
            var selectedImage = [];
            var chkboxs = $("#imgSelect").find("input[type=checkbox]:checked");
            if (chkboxs!=null && chkboxs.length>0) {
                chkboxs.each(function(idx,item){
                    selectedImage.push($(item).parent().find("img").attr("src"));
                });
                if (selectedImage.length>0) {
                    layer.load();
                    $.ajax({
                        url: "/Datasrv/SubProduct/UpdateSubProductImages",
                        type: "POST",
                        data: {seqId:seqId, imgUrls:selectedImage.join('^')},
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "success") {
                                table.reload('subProdColorReload', {});
                                console.log("图片更新成功")
                            } else {
                                console.log("图片更新失败")
                            }
                        }
                    });
                    layer.closeAll('loading'); //关闭loading
                }
            }
        };

        var updateSingleImages = function(imgObj){
            var seqId = imgObj.attr("seqId");
            var idx = imgObj.attr("index");
            var checkedBoxs = $("#imgSelect").find("input[type=checkbox]:checked");
            if (checkedBoxs!=null) {
                //选中单个校验
                if (checkedBoxs.length==0 || checkedBoxs.length>1) {
                    layer.alert('请选中一张图片!');
                }else{
                    var thisBox = $(checkedBoxs[0]);
                    var selectImageUrl = thisBox.parent().find("img").attr("src");
                    if (selectImageUrl.length>0) {
                        layer.load();
                        imgObj.attr("src",selectImageUrl);
                        $.ajax({
                            url: "/Datasrv/SubProduct/UpdateSingleImage",
                            type: "POST",
                            data: {seqId:seqId,imgUrl:selectImageUrl,index:idx},
                            dataType: "json",
                            success: function (data) {
                                if (data.state == "success") {
                                    console.log("图片更新成功")
                                    thisBox.attr("checked",false)
                                } else {
                                    console.log("图片更新失败")
                                }

                            }
                        });
                        layer.closeAll('loading'); //关闭loading
                    }
                }
            }
        };

        var openImgWindow = function(){
            $("#imgSelect").html('');
            $('.ulImages img').each(function(idx,img){
                $("#imgSelect").append('<li><div style="position: absolute; ">' +
                                        '<input type="checkbox" class="imgCheck" />' +
                                        '<img src="'+img.src+'" /></div></li>');
            });

            $("#imgSelect img").on("click",function(){
                var chkbox = $(this).parent().find("input")[0];
                chkbox.checked = !chkbox.checked;
            });
        };

        var table = layui.table
        var selectSizeRowIdx = 0;
        //尺码表格
        table.render({
            id: 'subProductSizeReload'
           , elem: '#subProductTb'
           , minheight: 10 //高度最大化减去差值
           , url: '/DataSrv/SubProduct/GetAllSubProductSizes?productId=@Model.Id&categoryCode=@Model.CategoryCode&isEng=@isEng' //数据接口
           , page: false //开启分页
           , cols: [[ //表头
                     { fixed: 'left',checkbox: true, fixed: false,width: 35}
                     ,  { hide: true, title: 'Id', field:'Id' }
                     , { field: 'Size', title: '@ViewData["Size"].ToString()', templet: '<div><span>{{d.OriSize}}</span></div>', width: 60, align: 'center' }
                     , { field: 'Size', title: '标准尺寸', templet: '<div><div class="selectSize" seqId="{{d.Id}}">{{d.Size}}</div></div>', width: 50, align: 'center' }
                      @Html.TabaleHeadHtml(ViewData["TableHead"], "1" == isEng)
                     , { field: 'Price', title: '价格(rmb)', templet: '<div><input type="text" class="layui-input" autocomplete="off" placeholder="请输入价格" value="{{d.Price}}"/></div>', width: 90, align: 'center' }
                     , { fixed: false,field: '',width: 80, title: '操作', templet: '<div><a class="layui-btn layui-btn-xs layui-btn-danger delPrdSize" seqId="{{d.Id}}" lay-event="del"><i class="layui-icon iconfont icon-guanbi"></i>删除</a></div>' }
           ]]
           ,done: function(res, curr, count){
               form.render();
               //form.render('select');
               var subProductSizeRows =  $("#subProdSizeTable table tbody tr");
               if (subProductSizeRows !=null) {
                   for (var i = 0; i < count; i++) {
                       console.log(!(allSizeList.indexOf($(subProductSizeRows[i]).find('td .selectSize').text())) != -1)
                       if(!(allSizeList.indexOf($(subProductSizeRows[i]).find('td .selectSize').text()) != -1)){
                           $(subProductSizeRows[i]).find('td .selectSize').addClass('boderRed');
                           $(subProductSizeRows[i]).find('td .selectSize').text('请校准尺码');
                       }
                   }
               }

               $("#variationTable .hd").each(function(idx,obj){
                   $(obj).parent().parent().hover(function(){
                       var divId = $(obj).attr('issize')=='1'?"divIncrSize":"divIncrWegith";

                       show(obj,divId);
                   },function(){
                       //$(".showbox").hide();
                   })
               });
             
               $('#variationTable .layui-table tr').click(function () {
                   selectSizeRowIdx = $(this).index();
                   console.log("selectSizeRowIdx:"+selectSizeRowIdx);
               });

               $("#standardSize").on("click",'span',function(){
                   var sizeRows =  $("#subProdSizeTable table tbody tr");
                   var sizeRowsList = [];
                   if (sizeRows !=null) {
                       for (var i = 0; i < sizeRows.length; i++) {
                           sizeRowsList.push($(sizeRows[i]).find('td .selectSize').text())
                       }
                   }

                   var aindex = layer.index;
                   if(sizeRowsList.indexOf($(this)[0].innerHTML) != -1 ){
                       layer.alert('尺寸重复，请重新选择',{icon: 2, time: 1500 });
                       layer.index = aindex--;
                   }else{
                       layer.close(layer.index);
                       $('.selectSize').eq(selectSizeRowIdx).html($(this)[0].innerHTML);
                   }
               });

               $("#divIncrSize").hover(function(){
                   //return true;
               },function(){
                   //$(".showbox").each(function(idx,obj){
                   //    $(obj).hide();
                   //});
                   $("#divIncrSize").hide();
                   $("#divIncrWegith").hide();
               });

               $("#divIncrWegith").hover(function(){
                   //return true;
               },function(){
                   $("#divIncrWegith").hide();
                   $("#divIncrSize").hide();
               });
               function show(event,divId){
                   //console.log(divId);
                   $(".showbox").hide();
                   var left = event.parentElement.parentElement.parentElement.offsetLeft+(event.parentElement.parentElement.offsetWidth-30)/2-50;
                   var top = $("#variationTable")[0].offsetTop + 60;
                   var showbox=$('#'+divId).css({
                       padding:'2px 5px',
                       position:'absolute',
                       top:top,
                       left:left,
                       color:'#FFFFFF',
                       index:'999',
                       border:'1px solid #CCC',
                       borderRadius:'5px',
                       background: '#405467',
                       zIndex:999,
                       width:'140px',
                   }).addClass("showbox");
                   $('#'+divId).attr("colIndex",$(event).attr("index"));
                   $('#'+divId).show();
               }

               $(".ul_incr a").click(function(){
                   var startVal = 0;
                   var incVal = $(this).text();
                   if (incVal=='') return;
                   incVal = incVal == '清空'?-1:parseFloat(incVal);
                   var colIndex = $(this).parent().parent().parent().attr("colIndex");
                   colIndex = colIndex !='' ? parseInt(colIndex) : 0;
                   $("#variationTable .layui-table-main tr").each(function(idx,obj){
                       if (incVal <0) {
                           $(obj).find("input")[colIndex].value = '';
                       }else{
                           if (idx==0) {
                               startVal = $(obj).find("input")[colIndex].value;
                           }else{
                               if (startVal !='') {
                                   $(obj).find("input")[colIndex].value = (parseFloat(startVal) + idx * incVal).toFixed(2);
                               }
                           }
                       }
                   });

                   //鞋类  欧美标计算
                   if (colIndex==1 && '@Model.CategoryCode' == 'CSH') {
                       $("#variationTable .layui-table-main tr").each(function(idx,obj){
                           for (var i = 2; i < 6; i++) {
                               if (incVal < 0) {
                                   $(obj).find("input")[i].value = '';
                               }else{
                                   startVal = $(obj).find("input")[1].value;
                                   if (startVal > 0) {
                                       switch (i) {
                                           case 2:
                                               startVal = parseFloat(startVal) - 17.5;
                                               break;
                                           case 3:  startVal = parseFloat(startVal) - 18;
                                               break;
                                           case 4:startVal = parseFloat(startVal)*2-10;
                                               break;
                                           case 5:startVal = parseFloat(startVal)*10;
                                               break;
                                           default:
                                       }
                                       $(obj).find("input")[i].value = startVal.toFixed(2);
                                   }
                               }
                           }
                       });
                   }

                   $(".showbox").hide();
               });

               //$("#selWegith").change(function(){

               //});
           }
        });
        //监听尺码表格工具条
        table.on('tool(subProductSize)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定要删除吗？', function (index) {
                    var seqId = obj.data.Id;
                    if (seqId==null) {
                        obj.del();//删除这一行          
                        layer.close(index); //关闭弹框
                    }else{
                        $.ajax({
                            url: "/Datasrv/SubProduct/DeleteSize",
                            type: "POST",
                            data: { "Id": seqId },
                            dataType: "json",
                            success: function (data) {
                                if (data.state == "success") {
                                    obj.del();//删除这一行
                                    layer.close(index); //关闭弹框
                                    common.msgSuccess("删除成功");
                                    //table.reload('subProdColorReload', {});
                                } else {
                                    common.msgError("删除失败");
                                }
                            }
                        });
                    }
                    return false;
                });
            }
        });
        //服务器排序
        table.on('sort(defaultruv)', function (obj) {
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，如：
            table.reload('subProductSizeReload', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
              , where: { //请求参数
                  field: obj.field //排序字段
                , order: obj.type //排序方式
              }
            });
        });

        //监听颜色表格工具条
        table.on('tool(defaultruv)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                var seqId = obj.data.Id;
                layer.open({
                    type: 1,
                    title: '产品图库',
                    area: ['945px', '555px'],
                    content: $('#selImgDiv'),
                    btn: ['取消','确定'],
                    btnAlign: 'r',
                    success: function(layero){
                        openImgWindow();

                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn1').on("click", function () {
                            //更新变体主图，附属图
                            updateImages(seqId);
                        });
                    }
                });
                return false;
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除吗？', function (index) {
                    var seqId = obj.data.Id;
                    $.ajax({
                        url: "/Datasrv/SubProduct/DeleteColor",
                        type: "POST",
                        data: { "Id": seqId },
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "success") {
                                obj.del();//删除这一行
                                layer.close(index); //关闭弹框
                                common.msgSuccess("删除成功");
                                //table.reload('subProdColorReload', {});
                            } else {
                                common.msgError("删除失败");
                            }
                        }
                    });

                    return false;

                });
            } else if (obj.event === 'edit') {
                window.open('/Datasrv/Product/Edit/' + data.Id, "_blank");
                //location.href = '/Datasrv/Product/Edit/' + data.Id;

                //common.openTop({
                //    title: '编辑详情', w: '1600px', h: '780px', content: '/Datasrv/Product/Edit/' + data.Id
                //});
            }
        });

        //颜色
        table.render({
            id: 'subProdColorReload'
        , elem: '#subProductColorTb'
        , minheight: 10 //高度最大化减去差值
        , url: '/DataSrv/SubProduct/GetAllSubProductImages?productId=@Model.Id' //数据接口
            , page: false //开启分页
            , cols: [[ //表头
                       {fixed: 'left',type:'checkbox',width: 35, fixed: false,}
                       ,  { hide: true, title: 'Id', field:'Id' }
                     , { field: 'OriColor',hide:@isEng=="1", title: '采集颜色', templet: '<div><span>{{d.OriColor}}</span></div>', width: 100, align: 'center' }
                          , { field: 'Color', title: '标准颜色', templet: '<div><div class="selectColor" seqId="{{d.Id}}">{{d.Color}}</div></div>', width: 90, align: 'center' }
                          , { title: 'Sku图', templet: '<div><img seqId="{{d.Id}}" style="width: 50px; height:50px; display: block;cursor:pointer" src="{{d.MainImage}}" index="0"/></div>', width: 65, align: 'center' }
                          , { title: '附属图', templet: '<div class="layui-input-block imgcontainer"><ul class="ulSmallImages" seqId="{{d.Id}}" >'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image01}}" index="1" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image02}}" index="2" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image03}}" index="3" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image04}}" index="4" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image05}}" index="5" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image06}}" index="6" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image07}}" index="7" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image08}}" index="8" /></div></li>'+
                              '<li><div><img seqId="{{d.Id}}" src="{{d.Image09}}" index="9" /></div></li></ul></div>', width: 515, align: 'center' }
                          , { fixed: false,field: '',width: 80,heght: 60, title: '操作', templet: '<div><a class="layui-btn layui-btn-xs selectBtn" seqId="{{d.Id}}" lay-event="detail"><i class="layui-icon iconfont icon-bianji"></i>选择图片</a>'+
                                                                '<a class="layui-btn layui-btn-xs layui-btn-danger delImg" seqId="{{d.Id}}" lay-event="del"><i class="layui-icon iconfont icon-guanbi"></i>删除</a></div>' }
            ]]
                ,done: function(res, curr, count){
                    count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');
                    layui.each($('select'), function (index, item) {
                        var elem = $(item);
                        elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                    });

                    //$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
                    if (!isEng) {
                        var subProductImgRows =  $("#subProdColorTable table tbody tr");
                        setTimeout(function(){
                            if (subProductImgRows !=null) {
                                for (var i = 0; i < count; i++) {
                                    console.log(!(colorAllList.indexOf($(subProductImgRows[i]).find('td .selectColor').text())) != -1)
                                    if(!(colorAllList.indexOf($(subProductImgRows[i]).find('td .selectColor').text()) != -1)){
                                        $(subProductImgRows[i]).find('td .selectColor').addClass('boderRed');
                                        $(subProductImgRows[i]).find('td .selectColor').text('请校准颜色');
                                    }
                                }
                            }
                        })

                        var selectColorRowIdx = 0;
                        $("#standardColor").on("click",'span',function(){
                            var subProductImgRows =  $("#subProdColorTable table tbody tr");
                            var subProductImgList = [];
                            if (subProductImgRows !=null) {
                                for (var i = 0; i < subProductImgRows.length; i++) {
                                    subProductImgList.push($(subProductImgRows[i]).find('td .selectColor').text())
                                }
                            }
                            var aindex = layui.layer.index;
                            if(subProductImgList.indexOf($(this)[0].innerHTML) != -1 ){
                                layer.alert('颜色重复，请重新选择',{icon: 2, time: 1500 });

                                layui.layer.index = aindex--
                            }else{
                                $('.selectColor').eq(selectColorRowIdx).html($(this)[0].innerHTML)
                                layer.close(aindex);
                                $('.selectColor').eq(selectColorRowIdx).removeClass('boderRed');
                            }
                            //$('.layui-table tr')
                            console.log($(this)[0].innerHTML,1111,$('.selectColor').eq(selectColorRowIdx), selectColorRowIdx);

                        });

                        $('#subProdColorTable .layui-table tr').click(function () {
                            selectColorRowIdx = $(this).index();
                            console.log("selectColorRowIdx:"+selectColorRowIdx);
                        });

                        $(".layui-table").on("click",".selectColor",function(index){
                            var selectColor = $(this);
                            layer.open({
                                type: 1,
                                title: '颜色校准',
                                area: ['900px', '500px'],
                                content: $('#standardColor'),
                                //btn: ['取消','确定'],
                                btnAlign: 'r',
                            });
                            return false;
                        });

                        $(".layui-table").on("click",".selectSize",function(index){
                            //鞋类
                            layer.open({
                                type: 1,
                                title: '尺码校准',
                                area: ['450px', '320px'],
                                content: $('#standardSize'),
                                //btn: ['取消','确定'],
                                btnAlign: 'r',
                            });
                            return false;
                        });

                    }

                    form.render();

                    $(".layui-table").on("click","img",function(){
                        var imgObj = $(this);
                        layer.open({
                            type: 1,
                            title: '产品图库',
                            area: ['945px', '555px'],
                            content: $('#selImgDiv'),
                            btn: ['取消','确定'],
                            btnAlign: 'r',
                            success: function(layero){
                                openImgWindow();

                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn1').on("click", function () {
                                    updateSingleImages(imgObj);
                                });
                            }
                        });
                        return false;
                    });
                }
        });
        
        $("#addSize").on("click", function () {
            var trRows=$("#variationTable .layui-table-body .layui-table tr");
            var tr=trRows[0].innerHTML;
            tr = "<tr data-index='"+trRows.length+"'>" + tr+ "</tr>";
            $("#variationTable .layui-table-body .layui-table").append(tr);

            $('#variationTable .layui-table tr').click(function () {
                selectSizeRowIdx = $(this).index();
            });
            return false;
        });

        $("#submitForm").on("click", function () {
            layer.load(); //loading

            var subProductImgList = [];
            var subProductImgRows =  $("#subProdColorTable table tbody tr");
            if (subProductImgRows !=null) {
                for (var i = 0; i < subProductImgRows.length; i++) {
                    var subProdId = $(subProductImgRows[i]).find('.layui-hide div').text();
                    var colorInput = $(subProductImgRows[i]).find('td input');
                    var selectColor = $(subProductImgRows[i]).find('td .selectColor').text();
                    if (selectColor.indexOf('校准')>0) {
                        layer.closeAll('loading'); //关闭loading
                        layer.alert('请将颜色设置完整!',{icon: 2, time: 1500 });
                        return;
                    }
                    subProductImgList.push({
                        Id:subProdId,
                        ProductId:@Model.Id,
                        Color:selectColor
                    });
                }
            }

            var subProductSizeList = [];
            var subProductRows =  $("#variationTable table tbody tr");
            if (subProductRows!=null) {
                for (var i = 0; i < subProductRows.length; i++) {
                    var subProdId = $(subProductRows[i]).find('.layui-hide div').text();
                    var inputs = $(subProductRows[i]).find('td input');
                    var keyAttributes="";
                    for (var j = 1; j < inputs.length-1; j++) {
                        var propVal = $(inputs[j])[0].value;
                        var endStr = j == inputs.length - 2 ? "" : "^";
                        keyAttributes += propVal + endStr;
                    }

                    var selectSize = $(subProductRows[i]).find('td .selectSize').text();
                    if (selectSize.indexOf('校准')>0) {
                        layer.closeAll('loading'); //关闭loading
                        layer.alert('请按大小顺序设置变体尺寸!',{icon: 2, time: 1500 });
                        return ;
                    }

                    subProductSizeList.push({
                        Id:subProdId,
                        ProductId:@Model.Id,
                        Size:selectSize,
                        Price:inputs[inputs.length-1].value,
                        KeyAttributes:keyAttributes});
                }
                $.ajax({
                    url: "/Datasrv/SubProduct/UpdateSubProductSizes?categoryCode=@Model.CategoryCode&isEng=@isEng",
                    type: "POST",
                    data: {subProdSizeList:subProductSizeList},
                    dataType: "json",
                    success: function (data) {
                        if (data.state == "success") {
                            common.msgSuccess("更新成功");
                            active['reload'].call(this);
                        } else {
                            common.msgError("更新失败");
                        }
                    }
                });
            }

            if (subProductImgList!=null && subProductImgList.length >0) {
                $.ajax({
                    url: "/Datasrv/SubProduct/UpdateSubProductColor?isEng=@isEng",
                    type: "POST",
                    data: {subProdImgList:subProductImgList},
                    dataType: "json",
                    success: function (data) {
                        if (data.state == "success") {
                            common.msgSuccess("更新成功");
                            active['reload'].call(this);
                        } else {
                            common.msgError(data.message);
                        }
                    }
                });
            }

            var mainImgIds= [],dImgIds = [];
            $("#imgStore li").each(function(indx,elem){
                mainImgIds.push($(elem).attr('id'));
            });
            $("#imgDStore li").each(function(indx,elem){
                dImgIds.push($(elem).attr('id'));
            });

            //更新图片顺序
            $.ajax({
                url: "/Datasrv/SubProduct/UpdateImagesSort",
                type: "POST",
                data: {mainImgIds:mainImgIds.join('^'),dImgIds:dImgIds.join('^')},
                dataType: "json",
                success: function (data) {
                    if (data.state == "success") {
                        console.log("图片更新成功")
                    } else {
                        console.log("图片更新失败")
                    }
                }
            });

            layer.closeAll('loading'); //关闭loading
        });

        function deleteCurrentRow(obj){
            var tr= $(obj).parent().parent().parent();
            var tbody=tr.parent();
            tbody.removeChild(tr);
            ////只剩行首时删除表格
            //if(tbody.rows.length==1) {
            //    tbody.parentNode.removeChild(tbody);
            //}
        }


        function EnlargeImg(){
            $(".ulImages img").hover(function(){
                var size = $(this)[0].naturalWidth + "X"+ $(this)[0].naturalHeight;
                $(this).parent().append("<p id='pic'><span>图片尺寸:"+size+"</span><img src='"+$(this).attr("src")+"' id='pic1'></p>");
                $(this).parent().mousemove(function(e){
                    var left=e.pageX >940 ? e.offsetX-400:e.offsetX+20;
                    $("#pic").css({
                        "top":(e.offsetY+20)+"px",
                        "left":left+"px"
                    }).fadeIn("fast");
                });

                //var height = $(obj).height()*3;
                //var width = $(obj).width()*3;
                //var url =  $(obj).attr("src");

            },function(){
                $("#pic").remove();
            });
        }

        //上传
        function uploadImages(compId,imgType,storeId){
            upload.render({
                elem: '#'+compId
                  ,accept:"images"
                  ,multiple: true //同时选择多图
                  ,size: 8000 //限制文件大小，单位 KB
                  ,acceptMime: 'image/*' //只筛选图片
                  ,url: '/DataSrv/Product/UploadFiles?imgType='+imgType+'&productId=@Model.Id&categoryCode=@Model.CategoryCode'//上传接口
                  ,progress: function(n){
                      //var percent = n + '%' //获取进度百分比
                      //element.progress('uploadImg', percent); //可配合 layui 进度条元素使用
                  }
                  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                      layer.load(); //上传loading
                  }
                  ,done: function(res){
                      if (res!=null&&res.errno==0) {
                          $('#'+storeId).append('<li id="'+res.imgId+'"'+ ' imagetype="'+imgType+'"' +'><div style="position: absolute; "><span class="rmPicture close" title="删除此图">×</span><img src="'+ res.data[0]+'" style="cursor: pointer;"></div></li>');
                          common.msgSuccess("图片上传成功");
                      }else{
                          common.msgSuccess("图片上传失败.");
                      }
                      EnlargeImg();

                      layer.closeAll('loading'); //关闭loading

                  }
                  ,error: function(){
                      layer.closeAll('loading'); //关闭loading
                      common.msgSuccess("图片上传异常");
                      //请求异常回调
                  }
            });
        }

        uploadImages('uploadMainImg',1,'imgStore');
        uploadImages('uploadDImg',2,'imgDStore');
        EnlargeImg();
    });

    </script>





